import React from 'react'
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';

export default class QuestionAdder extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            open: false,
            title: '',
        }

        this.handleOpen = this.handleOpen.bind(this)
        this.handleClose = this.handleClose.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.handleAddQue = this.handleAddQue.bind(this)
    }

    handleClose(){
        this.setState({
            open: false
        })
    }

    handleAddQue(){
        console.log('Add a que: '+this.state.title)
        // this.addQuestion(this.state.title)
        this.props.addQuestion(this.state.title)

        this.handleClose()
    }

    handleOpen(){
        this.setState({
            open: true
        })
    }

    handleChange(e){
        const t = e.target
        this.setState({
            title: t.value
        })
    }

    render() {
        const addQuestionActions = [
            <FlatButton
                label="Cancel"
                primary={true}
                onClick={this.handleClose}
            />,
            <FlatButton
                label="OK"
                primary={true}
                // keyboardFocused={true}
                onClick={this.handleAddQue}
            />,
        ]

        return (
            <div>
                <FloatingActionButton onClick={this.handleOpen}>
                    <ContentAdd/>
                </FloatingActionButton>
                <Dialog
                    title='Question title'
                    actions={addQuestionActions}
                    modal={false}
                    open={this.state.open}
                    contentStyle={{width: '350px'}}
                    onRequestClose={this.handleClose}>

                    <TextField
                        value={this.state.title}
                        hintText="Please enter title"
                        name="questionTitleToAdd"
                        onChange={this.handleChange}
                        floatingLabelText="Question Title"
                    />
                </Dialog>
            </div>
        )
    }
}